﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MegaMenu.aspx.cs" Inherits="OpenWaves.Navigation.Showcase.MegaMenu" %>

<%@ Register TagPrefix="x" Namespace="OpenWaves.Navigation.Showcase" Assembly="OpenWaves.Navigation.Showcase" %>

<!DOCTYPE html>
<html>
    
    <head runat="server">
        <title></title>    
        <link rel="stylesheet" href="Content/reset.css" />
        <link rel="stylesheet" href="Content/mega-menu.css" />
        <link rel="stylesheet" href="Content/mega-menu.skin.css" />
    </head>

    <body>
        
        <x:NavigationView runat="server" MaxNestingLevel="3" Model="<%# CreateModel() %>">
        
            <Template>
                <ul class="mega-menu">
                    <ow:ChildNodesPlaceHolder runat="server" />
                </ul>
            </Template>

            <FirstLevelNodeTemplate>
                <li class="<%# Container.GetNodeStateClass() %>">
                    
                    <a href="#"><%# Html.Encode(Container.Node.Name) %></a>

                    <div class="sub-menu">
                        <ow:Repeater runat="server" DataSource="<%# ((MegaMenuNode)Container.Node).Columns %>">
                            <ItemTemplate>
                                <ow:NodesPlaceHolder runat="server" DataSource="<%# Container.DataItem %>">
                                    <ul>
                                        <ow:ItemsPlaceHolder runat="server" />
                                    </ul>
                                </ow:NodesPlaceHolder>
                            </ItemTemplate>
                        </ow:Repeater>
                    </div>
                </li>
            </FirstLevelNodeTemplate>

            <NodeTemplate>
                <li class="<%# Container.GetNodeStateClass() %>">
                    
                    <a href="#"><%# Html.Encode( Container.Node.Name) %></a>
                    
                    <ow:ChildNodesPlaceHolder runat="server">
                        <ul>
                            <ow:ItemsPlaceHolder runat="server" />
                        </ul>
                    </ow:ChildNodesPlaceHolder>
                </li>
            </NodeTemplate>

        </x:NavigationView>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="Scripts/mega-menu.js" type="text/javascript"></script>
        <script type="text/javascript">
            $('.mega-menu').megaMenu();
        </script>

    </body>
</html>
